<template>
	<view class="detail">
		<view class="detail_title">
			<text class="detail_title_text">{{text}}</text>
			<text class="detail_title_make"  v-if="isShowAddMenu">菜品正在制作中</text>
		</view>
			<view class="detail_main">
				<view class="detail_item" v-for="(item,index) in menuList.menu" :key="index">
					<view class="detail_item_title">
						<text>第{{menuList.menu.length - index}}次下单</text>
						<text class="right">下单成功，坐等吃饭</text>
					</view>
					<view class="detail_menu" v-for="(t,i) in item.isShowMore ? item.goods_list : item.firstThreeList" :key="item._id">
						<view class="detail_menu_left">
							<img :src="t.image" alt="" class="detail_menu_left_img"/>
							<view class="detail_menu_left_name">
								<view class="name">{{t.name}}</view>
								<view class="unit">{{t.quantity}}份</view>
							</view>
						</view>
						<view class="detail_menu_right">
							￥{{t.totalPrice}}
						</view>
					</view>
					<view class="total_box">
						<text class="total_box_text">共{{item.goods_list.length}}份</text>
						<text class="total_box_num_text">总计</text>
						<text class="total_box_num">￥{{menuObj[0].sett_amount}}</text>
					</view>
					<view class="expand_all" v-if="item.goods_list.length > 3" @click="showMore(index)">
						<text>{{item.isShowMore ? '收起' : '展开全部'}}</text>
						<img v-if="!item.isShowMore" src="../../static/tab/down.svg" alt="" class="expand_all_img" />
						<img v-else src="../../static/tab/up.svg" alt="" class="expand_all_img" />
					</view>
				</view>
				<view class="order">
					<view class="order_item">
						<text>订单编号:</text>
						<text class="value">{{menuObj[0].order_no}}</text>
					</view>
					<view class="order_item">
						<text>下单时间:</text>
						<text class="value"> {{menuObj[0].order_time}}</text>
					</view>
					<view class="order_item">
						<text>桌号名称:</text>
						<text class="value">{{menuObj[0].table_number}}</text>
					</view>
				</view>
			</view>
		
		<view class="detail_bottom" v-if="isShowAddMenu">
			<view class="detail_bottom_add" @click="addMenu">加菜</view>
		</view>
	</view>
</template>

<script>
	// l连接数据库
	const db = wx.cloud.database()
	const good_collect = db.collection('order_data')
	const _ = db.command
	export default {
		data() {
			return {
				menuList:{
					menu:[]
				},
				menuObj:[],
				firstThreeList:[],
				isShowMore:false,
				text:'',
				isShowAddMenu:true,
			}
		},
		onLoad(option) {
			let { status } = option
			if(status ==='success') {
				this.isShowAddMenu = false
				this.text = '订单已完成'
			}else {
				this.isShowAddMenu = true
				this.text = '下单成功，坐等开吃'
			}
			this.getMenu()
		},
		methods: {
			showMore(index) {
				this.$set(this.menuList.menu[index],'isShowMore',!this.menuList.menu[index].isShowMore)
			},
			// 获取菜单
			async getMenu() {
				try{
					let field_obj = {
						number_of_diner:false,
						transac_status:false,
						order_receiving:false,
						_openid:false
					}
					const res = await good_collect.where({
						table_number:wx.getStorageSync('table_num'),
						transac_status:'unsettled'
					}).field(field_obj).get()
					this.menuObj = res.data
					this.menuList = this.menuObj[0]
					this.handlData()
				}catch(e){
					//TODO handle the exception
				}
			},
			// 处理数据
			handlData() {
				this.menuList.menu.map(item => {
					this.$set(item,'isShowMore',false)
					this.$set(item,'firstThreeList',item.goods_list.slice(0,3))
				})
				
				console.log(this.menuList,'this.menuList');	
			},
			addMenu() {
				// 页面跳转
				wx.reLaunch({
					url:'/pages/home-page/page'
				})
			}
			
		}
	}
</script>

<style>
	.detail {
		position: fixed;
		left:0;
		top:0;
		right: 0;
		bottom:0;
		background-color: rgba(192,192,192,.2);
	}
.detail_title {
	background: linear-gradient(to bottom,#f7d45f,#f7d562,#f8d561,#f9db76,#f9de80);
	height: 320rpx;
	padding: 0 40rpx;
	display: flex;
	flex-direction: column;
}
.detail_title_text {
	margin-top: 50rpx;
	font-size: 30rpx;
	color: #000;
	font-weight: 600;
}
.detail_title_make {
	font-size: 20rpx;
	color: #000;
	margin-top: 10rpx;
}
.detail_main {
	position: fixed;
	left:30rpx;
	top:160rpx;
	bottom:120rpx;
	right: 30rpx;
	overflow: auto;
}



.detail_item {
	padding: 30rpx;
	background-color: #fff;
	box-sizing: border-box;
	
}
.detail_item_title {
	display: flex;
	font-size: 20rpx;
	color: #ccc;
}
.right {
	margin-left:auto;
}
.detail_menu {
	display: flex;
	padding: 30rpx 0;
}
.detail_menu_left {
	display: flex;
}
	
.detail_menu_left_img {
	width: 100rpx;
	height: 100rpx;
}
.detail_menu_left_name {
	margin-left: 20rpx;
	display: flex;
	flex-direction: column;
}
.name {
	font-size: 26rpx;
	font-weight: 600;
	color:#000;
}
.unit {
	margin-top:auto;
	font-size: 24rpx;
	color:#ccc;
}
.detail_menu_right {
	margin-left: auto;
	font-size: 34rpx;
	font-weight: 600;
}
.expand_all {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20rpx;
	
}
.expand_all_img {
	width: 20rpx;
	height: 20rpx;
}

.total_box {
	display: flex;
	align-items: center;
	margin-bottom: 50rpx;
}
.total_box_text {
	margin-left: auto;
	font-size: 28rpx;
}
.total_box_num_text {
	font-size: 28rpx;
	color: #000;
	font-weight: 600;
	margin-left: 40rpx;
}
.total_box_num {
	font-size: 34rpx;
	color: #000;
	font-weight: 600;
	margin-left: 20rpx;
}


.order {
	margin: 100rpx 0 200rpx 0;
	font-size: 30rpx;
	color:#ccc ;
	background-color: #fff;
	padding: 30rpx 30rpx;
}
.order_item {
	margin-bottom:15rpx ;
}
.value {
	margin-left: 20rpx;
}























.detail_bottom {
	position: fixed;
	left:0;
	right: 0;
	bottom:0;
	height: 120rpx;
	background-color: #fff;
	display: flex;
	padding: 18rpx 20rpx;
	box-sizing: border-box;
}
.detail_bottom_add {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200rpx;
	display: flex;
	margin-left: auto;
	background-color: #f7d45f;
	border-radius: 40rpx;
	color:#000;
}
</style>
